//订单详情
'use strict';
import React,{Component} from 'react';
import Header from '../common/header';
import Icon from 'react-native-vector-icons';
import * as URLconstant from '../constant/URLconstant';
import Util from '../common/util'
import Toast from '../common/ToastUtil';
import {
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView,
    Alert, DeviceEventEmitter,
    StyleSheet
} from 'react-native';
import Alipay from "../common/Alipay";
export default class orderInfo extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            loaded: true,
            orderCode:null
        };
    }

    async componentDidMount() {
        let params = this.props.route.params
        await this.setState({
            user_id:params.user_id,
            order_id:params.order_id
        })
        this.getOrder()
        let that = this
        DeviceEventEmitter.addListener('orderInfo', function (Event) {
            // LOG("Event==========" + JSON.stringify(Event));
            let extras = Event.extras;
            let alertContent = Event.alertContent;
            if (extras == 9000) {
                that.getOrder()
            }
        });
    }


    getOrder(){
        let url
        let datakey=[]
        if(this.props.isExtract&&this.props.isExtract==true){
            url=URLconstant.EXTRACT_ORDER_INFO
            datakey['order_sn'] = this.props.order_sn
        }else{
            url = URLconstant.ORDERINFO_URL
            datakey['order_id'] = this.state.order_id
        }
        datakey['user_id']=this.state.user_id
        Util.get(url,datakey,this.getOrderSuc.bind(this),this.errorCallback.bind(this))
    }
    getOrderSuc(datas){
        if(datas.status==0){
            this.setState({
                orderData:datas.data,
                loaded:false
            })
            let member_extract = datas.data.member_extract
            if (member_extract == 20&&!this.props.isExtract) {
                let order_sn = datas.data.order_sn
                this.getOrderCode(order_sn)
            }
        }else{
            Toast.show(datas.msg)
        }
    }

    getOrderCode(order_sn){
        let url = URLconstant.GET_EXTRACT_CODE
        let datakey=[]
        datakey['order_sn']=order_sn
        datakey['user_id']=this.state.user_id
        Util.get(url,datakey,this.getCodeSuc.bind(this),this.errorCallback.bind(this))
    }
    getCodeSuc(datas){
        if(datas.status==0){
            this.setState({
                orderCode: datas.data
            })
        }
    }

    errorCallback(err){

    }



    toPay(){
        let data = this.state.data;
        let returnName = 'orderInfo'
        Alipay.alipayWithTradeNO(data.order_sn, data.seller_name, data.order_amount, returnName);
    }


    orderStatus(status){
        let txt = ''
        if(status==20){
            txt='待发货'
        }else if(status==10||status==11){
            txt='待付款'
        }else if(status==30){
            txt='待收货'
        }else if(status==40){
            txt='已完成'
        }else if(status==0){
            txt='已取消'
        }else{
            txt='退换货'
        }
        return txt
    }

    orderDetail(){
        let orderData = this.state.orderData
        return(
            <View style={styles.order_box}>
                <View style={styles.box_header}>
                    <Text style={{fontSize:14,color:"#000"}}>订单详情</Text>
                </View>
                <View style={styles.box_content}>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>订单号:{orderData.order_sn}</Text>
                    </View>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>下单时间:{orderData.add_time}</Text>
                    </View>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>店铺名称:{orderData.seller_name}</Text>
                    </View>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>订单状态:{this.orderStatus(orderData.status)}</Text>
                    </View>
                    <View style={[styles.content_item,{borderBottomWidth:0}]}>
                        <Text style={{fontSize:12,color:"#969696"}}>支付方式:{orderData.payment_name}</Text>
                    </View>
                </View>
            </View>
        )
    }

    showExtractCode(){
        let orderData = this.state.orderData
        let orderCode = this.state.orderCode
        if(orderCode==null){
            return null
        }
        if(orderData.member_extract==20&&orderData.status==20){
            return(
                <View style={styles.order_box}>
                    <View style={styles.box_header}>
                        <Text style={{fontSize:14,color:"#000"}}>提货二维码</Text>
                    </View>
                    <View style={{padding:10}}>
                        <Image
                            source={{uri:orderCode}}
                            style={styles.code_img}
                            resizeMode={'cover'}
                        />
                    </View>
                </View>
            )
        }
    }

    showShippingInfo(){
        let orderData = this.state.orderData
        return(
            <View style={styles.order_box}>
                <View style={styles.box_header}>
                    <Text style={{fontSize:14,color:"#000"}}>收货人及物流信息</Text>
                </View>
                <View style={styles.box_content}>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>收货人姓名:{orderData.consignee}</Text>
                    </View>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>手机号码:{orderData.phone_mob}</Text>
                    </View>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>收货地址:{orderData.region_name}{orderData.address}</Text>
                    </View>
                    {
                        orderData.shipping_name?
                            <View style={styles.content_item}>
                                <Text style={{fontSize:12,color:"#969696"}}>快递公司:{orderData.shipping_name}</Text>
                            </View>:null
                    }
                    {
                        orderData.invoice_no?
                        <View style={[styles.content_item,{borderBottomWidth:0}]}>
                            <Text style={{fontSize:12,color:"#969696"}}>物流单号:{orderData.invoice_no}</Text>
                        </View>:null
                    }
                </View>
            </View>
        )
    }

    backStatusName(status){
        let delivery_detail
        if (status==5){
            delivery_detail = "待配货"
        } else if (status == 1){
            delivery_detail = "待配送"
        } else if (status== 3) {
            delivery_detail = "配送中"
        } else if (status == 4){
            delivery_detail = "送货成功"
        }
        return delivery_detail
    }

    showShopShipping(){
        let orderData = this.state.orderData
        if(orderData.if_delivery==1||orderData.if_delivery==2){
            return(
                <View style={styles.order_box}>
                    <View style={styles.box_header}>
                        <Text style={{fontSize:14,color:"#000"}}>极速配送信息</Text>
                    </View>
                    <View style={styles.box_content}>
                        <View style={styles.content_item}>
                            <Text style={{fontSize:12,color:"#969696"}}>配送门店:{orderData.shop_name}</Text>
                        </View>
                        <View style={styles.content_item}>
                            <Text style={{fontSize:12,color:"#969696"}}>配货人员:{orderData.shop_member}</Text>
                        </View>
                        <View style={styles.content_item}>
                            <Text style={{fontSize:12,color:"#969696"}}>配送人员:{orderData.delivery_man}</Text>
                        </View>
                        <View style={[styles.content_item,{borderBottomWidth:0}]}>
                            <Text style={{fontSize:12,color:"#969696"}}>配送状态:{this.backStatusName(orderData.delivery_status)}</Text>
                        </View>
                    </View>
                </View>
            )
        }
    }

    showGoods(){
        let orderData = this.state.orderData
        return(
            <View style={styles.order_box}>
                <View style={styles.box_header}>
                    <Text style={{fontSize:14,color:"#000"}}>商品详情</Text>
                </View>
                <View style={[styles.box_content,{paddingBottom:10}]}>
                    {
                        orderData.order_goods.map((item,index)=>{
                            return(
                                <View style={styles.goods_item} key={index}>
                                    <View style={styles.goods_img}>
                                        <Image
                                            source={{uri:item.goods_image}}
                                            resizeMode={'cover'}
                                            style={styles.goods_img}
                                        />
                                    </View>
                                    <View style={styles.goods_item_right}>
                                        <Text style={{fontSize:14,color:"#000"}}>{item.goods_name}</Text>
                                        {
                                            item.specification?
                                                <Text style={{fontSize:12,color:"#969696"}}>{item.specification}</Text>:null
                                        }
                                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                            <Text style={{fontSize:16,color:"#f00"}}>¥{item.subtotal}</Text>
                                            <Text style={{fontSize:12,color:"#969696"}}>x{item.quantity}</Text>
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        )
    }

    showPrice(){
        let orderData = this.state.orderData
        return(
            <View style={styles.order_box}>
                <View style={styles.box_header}>
                    <Text style={{fontSize:14,color:"#000"}}>订单金额</Text>
                </View>
                <View style={styles.box_content}>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>商品总价:¥{orderData.goods_amount}</Text>
                    </View>
                    <View style={styles.content_item}>
                        <Text style={{fontSize:12,color:"#969696"}}>配送费用:¥{orderData.shipping_fee}</Text>
                    </View>
                    {
                        orderData.surplus_money&&orderData.surplus_money>0?
                            <View style={styles.content_item}>
                                <Text style={{fontSize:12,color:"#969696"}}>余额抵扣:¥{orderData.surplus_money}</Text>
                            </View>:null
                    }
                    {
                        orderData.coupon_fee&&orderData.coupon_fee>0?
                            <View style={styles.content_item}>
                                <Text style={{fontSize:12,color:"#969696"}}>优惠券抵扣:¥{orderData.coupon_fee}</Text>
                            </View>:null
                    }
                    <View style={[styles.content_item,{borderBottomWidth:0}]}>
                        <Text style={{fontSize:12,color:"#969696"}}>订单总价:¥{orderData.order_amount}</Text>
                    </View>
                </View>
            </View>
        )
    }

    //确认提货
    confirmOrder(){
        let orderData = this.state.orderData
        let tips
        if(orderData.status==10||orderData.status==11){
            tips='该订单需要线下进行支付，请您确认已经收款后再提货给用户'
        }else{
            tips='该订单已经支付，请准备货物给到消费者'
        }
        Alert.alert(
            '确认提货',
            tips,
            [
                {text:'取消',onPress:()=>LOG('press cancel')},
                {text:'确定',onPress:()=>this.requestOrder()}
            ]
        )
    }

    requestOrder(){
        let url = URLconstant.SUCCESS_ORDER
        let datakey=[];
        datakey['user_id'] = this.state.user_id
        datakey['order_sn'] = this.props.order_sn
        Util.get(url,datakey,this.requestOrderSuc.bind(this),this.errorCallback.bind(this))
    }

    requestOrderSuc(datas){
        this.props.navigator.pop()
        Toast.show(datas.msg)
    }

    showExtractBtn(){
        if(this.props.isExtract&&this.props.isExtract==true){
            return(
                <TouchableOpacity style={styles.extract_btn} onPress={()=>this.confirmOrder()}>
                    <Text style={{fontSize:14,color:"#fff"}}>确认提货</Text>
                </TouchableOpacity>
            )
        }
    }

    render() {
        return (
            <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                <Header navigation={this.props.navigation} title={'订单详情'}/>
                {
                    this.state.loaded ?
                    <View style={{flex:1}}>{
                        Util.loading()
                    }</View>
                    :
                    <ScrollView style={{flex:1,padding:10}}>
                        {this.orderDetail()}
                        {this.showExtractCode()}
                        {this.showShippingInfo()}
                        {this.showShopShipping()}
                        {this.showGoods()}
                        {this.showPrice()}
                        {this.showExtractBtn()}
                        <View style={{height:40}}></View>
                    </ScrollView>
                }


            </View>
        )
    }
}
var styles = StyleSheet.create({
    order_box:{
        backgroundColor:"#fff",
        borderWidth:1,
        borderColor:"#ddd",
        marginBottom:10
    },
    box_header:{
        height:35,
        borderBottomWidth:1,
        borderBottomColor:"#ddd",
        paddingHorizontal:10,
        justifyContent:'center'
    },
    box_content:{
        paddingHorizontal:10
    },
    content_item:{
        height:30,
        borderBottomWidth:1,
        borderBottomColor:"#ddd",
        justifyContent:"center"
    },
    goods_item:{
        paddingTop:10,
        flexDirection:"row",
    },
    goods_img:{
        width:80,
        height:80
    },
    goods_item_right:{
        flex:1,
        paddingLeft:10,
        paddingVertical:5,
        justifyContent:'space-between'
    },
    code_img:{
        width:Util.size.width-40,
        height:Util.size.width-40,
    },
    extract_btn:{
        width:Util.size.width-20,
        height:40,
        backgroundColor:"#c51a1f",
        alignItems:"center",
        justifyContent:'center',
    }
})